<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ConfigProvider } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import { ThemeManager, responsive } from './config/theme'
import { AccessibilityManager } from './config/accessibility'
import { GlobalLoading } from './components/Loading'
import { useGlobalLoading } from './composables/useLoading'
import zhCN from 'ant-design-vue/es/locale/zh_CN'

const themeManager = ThemeManager.getInstance()
const accessibilityManager = AccessibilityManager.getInstance()
const { loadingState } = useGlobalLoading()

const themeConfig = ref(themeManager.getThemeConfig())
const responsiveConfig = ref(themeManager.getResponsiveConfig())

onMounted(() => {
  // 监听主题变化
  const updateTheme = () => {
    themeConfig.value = themeManager.getThemeConfig()
  }
  
  // 监听响应式变化
  const updateResponsive = () => {
    responsiveConfig.value = themeManager.getResponsiveConfig()
  }
  
  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
  
  // 监听窗口大小变化
  window.addEventListener('resize', updateResponsive)
  
  // 设置主内容区域ID用于无障碍访问
  const mainContent = document.querySelector('main') || document.querySelector('#app > div')
  if (mainContent && !mainContent.id) {
    mainContent.id = 'main-content'
  }
})
</script>

<template>
  <ConfigProvider 
    :theme="themeConfig" 
    :locale="zhCN"
    :component-size="responsiveConfig.componentSize"
  >
    <div id="app" role="application" :aria-label="$t('app.title', 'LifeVerse 生命宇宙平台')">
      <RouterView />
      
      <!-- 全局加载组件 -->
      <GlobalLoading
        :visible="loadingState.visible"
        :tip="loadingState.tip"
        :description="loadingState.description"
        :progress="loadingState.progress"
        :progress-status="loadingState.progressStatus"
      />
    </div>
  </ConfigProvider>
</template>

<style>
#app {
  min-height: 100vh;
}

/* 全局样式重置 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ant Design Vue 样式覆盖 */
.ant-layout {
  background: #f0f2f5;
}

.ant-layout-header {
  height: 64px;
  line-height: 64px;
}

.ant-layout-sider-dark {
  background: #001529;
}

.ant-menu-dark {
  background: #001529;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ant-layout-content {
    margin: 16px !important;
    padding: 16px !important;
  }
}
</style>
